<template>
  <div class="project-container">
    <div class="title-container">
      <h1 class="title">
        项目管理
      </h1>
    </div>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleCreate"
      style="margin-left:20px"
      >新建</el-button
    >
    <from-table
      :tablekey="tablekey"
      :listLoading="listLoading"
      :list="list"
      @handleUpdate="handleUpdate"
      @handleDelete="handleDelete"
      @handleUpdateStatus="handleUpdateStatus"
    />
    <from-dialog
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      :row="updateRow"
      @createData="createData"
      @updateData="updateData"
      @closeDialog="closeDialog"
    ></from-dialog>
  </div>
</template>

<script>
import table from "@/components/board/Project/Table";
import dialog from "@/components/board/Project/Dialog";
import ProjectService from "@/service/project";

const projectService = new ProjectService();
export default {
  name: "Project",
  components: {
    FromTable: table,
    FromDialog: dialog
  },
  data() {
    return {
      tablekey: 2,
      listLoading: false,
      list: [],
      title: "",
      dialogFormVisible: false,
      updateRow: {}
    };
  },
  created() {
    this.initInfo();
  },
  methods: {
    async initInfo() {
      this.list = await projectService.findProject();
    },
    handleCreate() {
      this.title = "新建项目";
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      this.title = "修改项目";
      this.dialogFormVisible = true;
      this.updateRow = row;
    },
    handleDelete(row, index) {
      let id = row.id;
      projectService.destroyProject({ id }).then(() => {
        this.list.splice(index, 1);
      });
    },
    handleUpdateStatus(row, tar) {
      let status = tar === "up" ? 1 : 0,
        id = row.id;
      projectService.changeEssayStatus({ id, status }).then(() => {
        row.status = status;
      });
    },
    createData(data) {
      let formData = new FormData();
      formData.append("files", data.file);
      formData.append("projectname", data.projectName);
      formData.append("projectlink", data.projectLink);
      projectService.createProject(formData).then(() => {
        this.closeDialog();
        this.initInfo();
      });
    },
    updateData(data) {
      let formData = new FormData();
      formData.append("files", data.file);
      formData.append("projectname", data.projectName);
      formData.append("projectlink", data.projectLink);
      formData.append("id", this.updateRow.id);
      projectService.updateProject(formData).then(() => {
        this.closeDialog();
        this.initInfo();
      });
    },
    closeDialog(type) {
      this.dialogFormVisible = false;
      this.updateRow = {};
    }
  }
};
</script>

<style scoped>
.title-container {
  width: 100%;
  padding: 20px;
  font-weight: 500;
}
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.project-container {
  height: 100%;
  overflow: auto;
}
</style>